<template>
  <div>
    <el-row>
      <el-col :span="14" style="padding-right:15px">
        <div class="el-component-module">
          <div class="el-component-moduleTop">
            <h4>常用工具</h4>
          </div>
          <div class="el-component-moduleBottom undeveloped">
            <!--<div class="tools" v-for="(item, index) in toolsMenuList" :key="index" @click="addTab(item)">-->
              <!--<span>{{item.menu_name}}</span>-->
            <!--</div>-->
          </div>
        </div>
        <div class="el-component-module">
          <div class="el-component-moduleTop">
            <h4>待办事项</h4>
          </div>
          <div class="el-component-moduleBottom undeveloped">
          </div>
        </div>
        <div class="el-component-module">
          <div class="el-component-moduleTop">
            <h4>敬请期待</h4>
          </div>
          <div class="el-component-moduleBottom undeveloped">
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="el-component-module">
          <div class="el-component-moduleTop">
            <h4>活动日历</h4>
          </div>
          <div class="el-component-moduleBottom undeveloped">
          </div>
        </div>
        <div class="el-component-module">
          <div class="el-component-moduleTop">
            <h4>使用公告</h4>
          </div>
          <div class="el-component-moduleBottom" v-loading="gonggaoLoading">
            <div class="gonggao">
              <div v-for="(item, index) in gonggaoList" :key="index" @click="gonggaoDetail(item.announceId)">
                <span class="gonggaoLeft">{{(index + 1 + '、') + item.title}}</span>
                <span class="gonggaoRight">{{item.createTime.split(' ')[0]}}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { gzt } from '../../config/proxy.js'
  import mixins from '../../components/mixins.vue'
//  import { apiURL } from '../../config/settings.js'
  export default {
    mixins: [mixins],
    data () {
      return {
        toolsList: ['满减管理', '满赠管理', '兑换码', '栏目审核', '普通套餐', '限时抢购', '领券中心', '定投', '优惠券活动审核', '满返'], // 常用工具集合
        toolsMenuList: [],
        gonggaoList: [], // 公告list
        gonggaoLoading: false
      }
    },
    methods: {
      matchMenu (menu) { // 匹配菜单
        this.toolsMenuList = []
        for (let i = 0; i < this.toolsList.length; i++) {
          const item = this.toolsList[i]
          for (let f = 0; f < menu[0].menuArray.length; f++) {
            const menuF = menu[0].menuArray[f]
            for (let s = 0; s < menuF.menuArray.length; s++) {
              const menuS = menuF.menuArray[s]
              if (menuS.menu_name === item) {
                console.log(menuS)
                this.toolsMenuList.push(menuS)
              } else {
                for (let t = 0; t < menuS.menuArray.length; t++) {
                  const menuT = menuS.menuArray[t]
                  if (menuT.menu_name === item) {
                    this.toolsMenuList.push(menuT)
                  } else {
                    for (let fo = 0; fo < menuT.menuArray.length; fo++) {
                      const menuFo = menuT.menuArray[fo]
                      if (menuFo.menu_name === item) {
                        this.toolsMenuList.push(menuFo)
                      }
                    }
                  }
                }
              }
            }
          }
        }
        console.log(this.toolsMenuList)
      },
      addTab (val) {
        console.log(val)
        val.selMenu = val.menu_id
        this.$store.dispatch('addTab', val)
      },
      searchList () { // 查询公告
        this.gonggaoLoading = true
        gzt.gonggaogl.list2({}, (res) => { // 查询
          // console.log(_data)
          console.log(res, '4条')
          if (res.message === 'ok') {
            this.gonggaoLoading = false
//            this.gonggaoList = res.content.content.filter(item => { return item.state !== 1 })
            this.gonggaoList = res.content
            console.log(this.gonggaoList)
          } else {
            this.gonggaoLoading = false
            this.message('查询失败', 'error')
          }
        })
      },
      gonggaoDetail (id) {
        this.openNewWindow('gonggaogl_detail', '公告详情', 'gonggaogl_detail', id)
      }
    },
    created () {
      this.searchList()
      this.$store.dispatch('selMenu', '1')
    },
    computed: {
      update_state: function () {
        // console.log(state.updateState.dhmState)
        return this.$store.state.updateState.gonggaoglState
      },
      menuList: function () {
        return this.$store.state.menu.menuList
      }
    },
    watch: {
      update_state (curVal, oldVal) {  // 监听 更新状态 查询list
        this.searchList()
      },
      menuList (a, b) {
        console.log(a)
        this.matchMenu(a)
      }
    }
  }
</script>

<style>
/* 组件模块 */
  .el-component-module {
    border: 1px solid #ececee;
    margin-bottom: 15px;
    background: #fff;
  }
  .el-component-module:hover{
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
  }
  .el-component-moduleTop{
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ececec;
    background: #f5f8fd;
    text-align: center;
  }
  .el-component-moduleTop h4 {
    font-weight: 600;
    font-size: 14px;
    padding: 0;
    margin: 0;
  }
  .el-component-moduleTop h4::selection{
    background:#f5f8fd
  }
 .el-component-moduleTop .el-button {
   float: right;
 }
 .el-component-moduleTop .el-button i {
   margin-left: 10px;
 }
 .el-component-moduleBottom {
   display: flex;
   flex-wrap: wrap;
 }
 .undeveloped {
   min-height: 200px;
   background: url('../../assets/exploit.png') no-repeat center;
 }
 .tools {
   width: 100px;
   height: 100px;
   border-radius: 50px;
   background:#c51712;
   color: #fff;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
 }
 .tools span {
   padding: 0 5px;
 }
 .gonggao {
   width: 90%;
   padding: 0 5%;
   cursor: pointer;
  }
  .gonggao div {
    line-height: 40px;
    color: #525252;
  }
  .gonggaoLeft {
    width: 80%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    float: left;
  }
  .gonggaoRight {
    overflow: hidden;
    width: 20%;
    font-size: 14px;
    float: left;
  }
</style>
